<style>
.lyear-dropdown-tree {
    position: relative;
    flex:1 1 0%;
}
.lyear-dropdown-tree .checkbox-box,
.lyear-dropdown-tree .radio-box {
    font-size: 15px;
    cursor: pointer;
}
.lyear-dropdown-tree .arrow {
    margin-left: -15px;
}
.lyear-dropdown-tree .checkbox-box:before {
    content: "\F131";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-checked:before {
    content: "\F135";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-half-checked:before {
    content: "\F6F1";
}
.lyear-dropdown-tree .radio-box:before {
    content: "\F130";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-checked:before {
    content: "\F134";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-half-checked:before {
    content: "\F377";
}
.lyear-dropdown-tree .dropdown-menu {
    min-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    padding-bottom: 13px;
}
.lyear-dropdown-tree .dropdown-menu > li {
    margin-left:  15px;
}
.lyear-dropdown-tree .dropdown-menu li ul {
    list-style: none;
    padding-left: 25px;
}
.lyear-dropdown-tree .dropdown-menu li ul a {
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    padding: 3px 20px;
}
.lyear-dropdown-tree .dropdown-menu li a {
    display: inline-block;
    padding-left: 15px!important;
    width: auto;
}
.lyear-dropdown-tree .dropdown-menu li a.lyear-dropdown-tree-a-checked {
    color: #33cabb;
}
.lyear-dropdown-tree .dropdown-menu a:hover,
.lyear-dropdown-tree .dropdown-menu a:active,
.lyear-dropdown-tree .dropdown-menu a:focus {
    background-color: transparent;
}
.lyear-dropdown-tree .form-control {
    padding-right: 30px;
    cursor: pointer;
}
.lyear-dropdown-tree i.lyear-cert {
    font-size: 20px;
    position: absolute;
    top: 3px;
    right: 5px;
}
/*bootstrap-select插件用到的，也可以不用*/
.bootstrap-select.open .dropdown-toggle {
    border-color: #33cabb!important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
}
.bootstrap-select.open .dropdown-menu.open {
    border: 1px solid #ebebeb;
}
.bootstrap-select.show .dropdown-toggle {
    border-color: #33cabb!important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
}
.bootstrap-select.show .dropdown-menu.open {
    border: 1px solid #ebebeb;
}
/*示例二、三、四、五*/
.p-t-5 {
    padding-top: 5px;
}
/*示例五*/
.input-group-controls {
    height: 36px;
    flex: 1 1 0%;
    border: 1px solid #F2F3F3;
    padding-left: 15px;
}
@media (min-width: 576px){
	.modal-dialog {
	    max-width: 550px;
	}
}
</style> 
<link href="/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/js/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="/js/fontIconPicker3.1/css/base/jquery.fonticonpicker.min.css" />
<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="js/fontIconPicker3.1/css/themes/grey-theme/jquery.fonticonpicker.grey.min.css"/>              
                <div class="modal fade" id="addPostModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalGridTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h6 class="modal-title" id="exampleModalGridTitle">新增导航</h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
				        <div class="row">
				          <div class="col-12">
				            <div class="card">
				              <div class="card-body">
				                <form action="#!" method="post" class="row" id="postAddForm">
				                <div class="form-group col-12">
						          <div class="input-group">
							           <div class="input-group-prepend"><span class="input-group-text">上级导航</span></div>
							            <div class="lyear-dropdown-tree" id="lyear-dropdown-tree">
							              <input type="text" class="form-control" id="termSelect" name="termSelect" placeholder="请选择上级导航" data-toggle="dropdown">
							              <input type="hidden" name="postParent" id="postParent"/>
							              <input type="hidden" name="termId" th:value="${term.id}" id="termId">
							            </div>
						          </div>
						          </div>
						          <div class="form-group col-12">
					              <div class="input-group">
					                <div class="input-group-prepend"><span class="input-group-text">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span></div>
					                <div class="form-controls input-group-controls p-t-5">
					                  <div class="custom-control custom-radio custom-control-inline">
					                     <input class="custom-control-input" type="radio" name="type" id="inlineRadio1" value="category">
				                         <label class="custom-control-label" for="inlineRadio1">文章分类</label>
					                  </div>
					                  <div class="custom-control custom-radio custom-control-inline">
					                     <input class="custom-control-input" type="radio" name="type" id="inlineRadio4" value="product_category">
				                         <label class="custom-control-label" for="inlineRadio4">商品分类</label>
					                  </div>					                  
					                  <div class="custom-control custom-radio custom-control-inline">
					                     <input class="custom-control-input" type="radio" name="type" id="inlineRadio2" value="page">
				                         <label class="custom-control-label" for="inlineRadio2">页面</label>
					                  </div>
					                  <div class="custom-control custom-radio custom-control-inline">
					                     <input class="custom-control-input" type="radio" name="type" id="inlineRadio3" value="link_category">
				                         <label class="custom-control-label" for="inlineRadio3">自定义</label>
					                  </div>
					                </div>
					              </div>
					              </div>
					              <div class="form-group col-12 " id="userLinkAddr" style="display:none;">
				                  <div class="input-group">
				                    <div class="input-group-prepend"><span class="input-group-text" id="menuLabel">链接地址</span></div>
				                    <input type="text" class="form-control" id="navUrl" name="navUrl" value="" placeholder="自定义链接地址" />
				                  </div>
		                         </div> 
				                <div class="form-group col-12 " id="categoryRow" style="display:none;">
						          <div class="input-group">
							           <div class="input-group-prepend"><span class="input-group-text">文章分类</span></div>
							            <div class="lyear-dropdown-tree" id="lyear-dropdown-tree-category">
							              <input type="text" class="form-control" id="categorySelect" name="categorySelect" placeholder="请选择分类" data-toggle="dropdown">
							            </div>
						          </div>
						          </div>	
				                <div class="form-group col-12 " id="productRow" style="display:none;">
						          <div class="input-group">
							           <div class="input-group-prepend"><span class="input-group-text">商品分类</span></div>
							            <div class="lyear-dropdown-tree" id="lyear-dropdown-tree-product">
							              <input type="text" class="form-control" id="productCategorySelect" name="productCategorySelect" placeholder="请选择分类" data-toggle="dropdown">
							            </div>
						          </div>
						          </div>						          
						          <div class="form-group col-12" id="pageRow" style="display:none;">
						            <div class="input-group">
						              <div class="input-group-prepend">
						                <span class="input-group-text">页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;面</span>
						              </div>
						              <select class="form-control selectpicker" name="example-1" id="navPage">
							          </select>
						            </div>
						          </div>	
					              <div class="form-group col-12">
				                  <div class="input-group">
				                    <div class="input-group-prepend"><span class="input-group-text" id="menuLabel">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题</span></div>
				                    <input type="text" class="form-control" id="postTitle" name="postTitle" value="" placeholder="请输入标题" />
				                    <input type="hidden" name="id" id="id"/>
				                    <input type="hidden" name="postContent" id="postContent"/>
				                  </div>
		                         </div> 	
					            <div class="form-group col-md-12 file-group">
					              <div class="input-group">
					              <div class="input-group-prepend"><span class="input-group-text">预览图片</span></div>
					                <input type="text" class="form-control file-value" name="imgPreview" value="" placeholder="预览图片地址" />
					                <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif" class="d-none" />
					                <div class="input-group-append">
					                  <button class="btn btn-default file-browser" type="button">上传图片</button>
					                </div>
					              </div>
					            </div>			                         					                                   		                         
		                         <div class="form-group col-12">
				                  <div class="input-group">
				                    <div class="input-group-prepend"><span class="input-group-text" id="menuLabel">描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述</span></div>
				                     <input type="text" class="form-control" id="postExcerpt" name="postExcerpt" value="" placeholder="请输入描述" />
				                  </div>
				                  </div>
				                  <div class="form-group col-12">
				                  <div class="input-group">
				                   <div class="input-group-prepend"><span class="input-group-text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序</span></div>
				                    <input type="text" class="form-control" id="postOrder" name="postOrder"  />
				                  </div>
				                  </div>
				                </form>
				              </div>
				            </div>
				          </div>
				        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-close">关闭</button>
                        <button type="button" class="btn btn-primary"  name="save" id="postAddBtn">保存</button>
                        <button class="btn-hide"></button>
                      </div>
                    </div>
                  </div>
                </div>
			<script type="text/javascript" src="/js/bootstrap.lyear.dropdowntree.min.js"></script>
			<script src="/js/bootstrap-select/bootstrap-select.min.js"></script>
			<script src="/js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>			
			<!-- fontIconPicker JS -->
			<script type="text/javascript" src="/js/fontIconPicker3.1/js/jquery.fonticonpicker.min.js"></script>                